var vm = new Vue({
        el: "#app",
        data: {
            host: host,
            user_id: sessionStorage.user_id || localStorage.user_id,
            token: sessionStorage.token || localStorage.token,
            username: sessionStorage.username || localStorage.username,
            residence: '',
            schooltag: '',
            company: '',
            website: '',
            school: '',
            major: '',
            company_name: '',
            job_name: '',
            introduce: '',
            real_name: '',
            birthday: '',
            mobile: '',
            gender: '',
            email: '',
            address: '',
            avatar: '../img/widget-myphoto.jpg',
            work_experiences: '',
            education_experiences: '',
            a1: true,
            a2: false,
            b1: true,
            b2: false,
            c1: true,
            c2: false,
            d1: true,
            d2: false,
            e1: true,
            e2: false,
            f1: 'inline',
            f2: 'none',
            g1: 'inline',
            g2: 'none',
            h1: 'inline',
            h2: 'none',
            i1: 'inline',
            i2: 'none',
            is_active1: 'active',
            is_active2: 'active',
            j1: 'inline',
            j2: 'none',
        },
        mounted: function () {
            // 判断用户的登录状态
            if (this.user_id && this.token) {
                axios.get(this.host + '/user/', {
                    // 向后端传递JWT token的方法
                    headers: {
                        'Authorization': 'JWT ' + this.token
                    },
                    responseType: 'json',
                })
                    .then(response => {
                            // 加载用户数据
                            this.user_id = response.data.id;
                            this.username = response.data.username;
                            this.residence = response.data.residence;
                            if (!this.residence) {
                                this.residence = "填写居住地"
                            }
                            this.schooltag = response.data.schooltag;
                            if (!this.schooltag) {
                                this.schooltag = "填写毕业学校"
                            }
                            this.company = response.data.company;
                            if (!this.company) {
                                this.company = "填写所在公司/组织"
                            }
                            this.website = response.data.website;
                            if (!this.website) {
                                this.website = "填写个人网址"
                            }
                            this.introduce = response.data.introduce;
                            if (!this.introduce) {
                                this.introduce = "没有个人简介"
                            }
                            this.real_name = response.data.real_name;
                            if (!this.real_name) {
                                this.real_name = "暂无"
                            }
                            this.birthday = response.data.birthday;
                            if (!this.birthday) {
                                this.birthday = "暂无"
                            }
                            this.mobile = response.data.mobile;
                            this.gender = response.data.gender;
                            if (!this.gender) {
                                this.gender = "暂无"
                            }
                            this.email = response.data.email;
                            if (!this.email) {
                                this.email = "暂无"
                            }
                            this.address = response.data.address;
                            if (!this.address) {
                                this.address = "暂无"
                            }
                        }
                    )
                    .catch(error => {
                        if (error.response.status == 401 || error.response.status == 403) {
                            location.href = '/person-loginsign.html?next=/person-homepage.html';
                        }
                    });
                axios.get(this.host + '/work_experiences/', {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                    }
                ).then(response => {
                        this.work_experiences = response.data.work_experience;
                        console.log(this.work_experiences)
                    }
                );
                axios.get(this.host + '/education_experiences/', {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                    }
                ).then(response => {
                        this.education_experiences = response.data.education_experience;
                    }
                )
            } else {
                location.href = '/person-loginsign.html?next=/person-homepage.html';
            }
        }
        ,
        methods: {
            edit: function (id) {
                if (id == 1) {
                    this.a1 = false;
                    this.a2 = true;
                    this.b1 = true;
                    this.b2 = false;
                    this.c1 = true;
                    this.c2 = false;
                    this.d1 = true;
                    this.d2 = false
                }
                if (id == 2) {
                    this.a1 = true;
                    this.a2 = false;
                    this.b1 = false;
                    this.b2 = true;
                    this.c1 = true;
                    this.c2 = false;
                    this.d1 = true;
                    this.d2 = false
                }
                if (id == 3) {
                    this.a1 = true;
                    this.a2 = false;
                    this.b1 = true;
                    this.b2 = false;
                    this.c1 = false;
                    this.c2 = true;
                    this.d1 = true;
                    this.d2 = false
                }
                if (id == 4) {
                    this.a1 = true;
                    this.a2 = false;
                    this.b1 = true;
                    this.b2 = false;
                    this.c1 = true;
                    this.c2 = false;
                    this.d1 = false;
                    this.d2 = true
                }
                if (id == 5) {
                    this.e1 = false;
                    this.e2 = true
                }
                if (id == 6) {
                    this.f1 = 'none';
                    this.f2 = 'inline';
                    this.g1 = 'inline';
                    this.g2 = 'none';
                    this.h1 = 'inline';
                    this.h2 = 'none';
                    this.i1 = 'inline';
                    this.i2 = 'none';
                    this.j1 = 'inline';
                    this.j2 = 'none'
                }
                if (id == 7) {
                    this.f1 = 'inline';
                    this.f2 = 'none';
                    this.g1 = 'none';
                    this.g2 = 'inline';
                    this.h1 = 'inline';
                    this.h2 = 'none';
                    this.i1 = 'inline';
                    this.i2 = 'none';
                    this.j1 = 'inline';
                    this.j2 = 'none'
                }
                if (id == 8) {
                    this.f1 = 'inline';
                    this.f2 = 'none';
                    this.g1 = 'inline';
                    this.g2 = 'none';
                    this.h1 = 'none';
                    this.h2 = 'inline';
                    this.i1 = 'inline';
                    this.i2 = 'none';
                    this.j1 = 'inline';
                    this.j2 = 'none'
                }
                if (id == 9) {
                    this.f1 = 'inline';
                    this.f2 = 'none';
                    this.g1 = 'inline';
                    this.g2 = 'none';
                    this.h1 = 'inline';
                    this.h2 = 'none';
                    this.i1 = 'none';
                    this.i2 = 'inline';
                    this.j1 = 'inline';
                    this.j2 = 'none'
                }
                if (id == 10) {
                    this.f1 = 'inline';
                    this.f2 = 'none';
                    this.g1 = 'inline';
                    this.g2 = 'none';
                    this.h1 = 'inline';
                    this.h2 = 'none';
                    this.i1 = 'inline';
                    this.i2 = 'none';
                    this.j1 = 'none';
                    this.j2 = 'inline'
                }
                if (id == 11) {
                    this.f1 = 'inline';
                    this.f2 = 'none';
                    this.g1 = 'none';
                    this.g2 = 'block';
                    this.h1 = 'inline';
                    this.h2 = 'none';
                    this.i1 = 'inline';
                    this.i2 = 'none';
                    this.j1 = 'inline';
                    this.j2 = 'none'
                }
                if (id == 12) {
                    this.f1 = 'inline';
                    this.f2 = 'none';
                    this.g1 = 'inline';
                    this.g2 = 'none';
                    this.h1 = 'none';
                    this.h2 = 'block';
                    this.i1 = 'inline';
                    this.i2 = 'none';
                    this.j1 = 'inline';
                    this.j2 = 'none'
                }
                if (id == 13) {
                    this.f1 = 'inline';
                    this.f2 = 'none';
                    this.g1 = 'inline';
                    this.g2 = 'none';
                    this.h1 = 'inline';
                    this.h2 = 'none';
                    this.i1 = 'none';
                    this.i2 = 'block';
                    this.j1 = 'inline';
                    this.j2 = 'none'
                }

            },
            save: function (id) {
                if (id == 1) {
                    axios.put(this.host + '/user/', {
                        residence: this.residence,
                        mobile: this.mobile,
                        username: this.username
                    }, {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            this.residence = response.data.residence;
                        })
                        .catch(error => {
                            alert('失败')
                        })
                }
                if (id == 2) {
                    axios.put(this.host + '/user/', {
                        schooltag: this.school + this.major,
                        mobile: this.mobile,
                        username: this.username
                    }, {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            this.schooltag = response.data.schooltag;
                        })
                }
                if (id == 3) {
                    axios.put(this.host + '/user/', {
                        company: this.company_name + this.job_name,
                        mobile: this.mobile,
                        username: this.username
                    }, {
                        headers: {
                            'Authorization': 'JWT ' + token
                        },
                        responseType: 'json'
                    })
                        .then(response => {
                            this.company = response.data.company;
                        })
                }
                if (id == 4) {
                    axios.put(this.host + '/user/', {website: this.website, mobile: this.mobile, username: this.username}, {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            this.website = response.data.website;
                        })
                }
                if (id == 5) {
                    axios.put(this.host + '/user/', {
                        introduce: this.introduce,
                        mobile: this.mobile,
                        username: this.username
                    }, {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            this.introduce = response.data.introduce;
                        })
                }
                if (id == 6) {
                    axios.put(this.host + '/user/', {
                            real_name: this.real_name,
                            birthday: this.birthday,
                            mobile: this.mobile,
                            residence: this.residence,
                            gender: this.gender,
                            website: this.website,
                            email: this.email,
                            address: this.address,
                            username: this.username
                        },
                        {
                            headers: {
                                'Authorization': 'JWT ' + this.token
                            },
                            responseType: 'json',
                            withCredentials: true
                        })
                        .then(response => {
                            this.real_name = response.data.real_name;
                            this.birthday = response.data.birthday;
                            this.mobile = response.data.mobile;
                            this.residence = response.data.residence;
                            this.gender = response.data.gender;
                            this.website = response.data.website;
                            this.email = response.data.email;
                            this.address = response.data.address;
                        })
                }
                if (id == 7) {
                    axios.put(this.host + '/user/', {
                        real_name: this.real_name,
                        mobile: this.mobile,
                        username: this.username
                    }, {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            this.real_name = response.data.real_name;
                        })
                }
                if (id == 8) {
                    axios.put(this.host + '/user/', {email: this.email, mobile: this.mobile, username: this.username}, {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            this.email = response.data.email;
                        })
                }
                if (id == 9) {
                    axios.put(this.host + '/user/', {mobile: this.mobile, username: this.username}, {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            this.mobile = response.data.mobile;
                        })
                }
                if (id == 10) {
                    axios.put(this.password + '/user/', {
                        password: this.password,
                        mobile: this.mobile,
                        username: this.username
                    }, {
                        headers: {
                            'Authorization': 'JWT ' + this.token
                        },
                        responseType: 'json',
                        withCredentials: true
                    })
                        .then(response => {
                            this.password = response.data.password;
                        })
                }
            },
            change_active: function (id) {
                if (id == 1) {
                    this.is_active1 = 'active';
                    this.is_active2 = null
                }
                if (id == 2) {
                    this.is_active1 = null;
                    this.is_active2 = 'active'
                }
            }
        }
    }
);

